<!--
 * @Author: 李天惊 uf_lee@163.com
 * @Date: 2022-12-20 14:35:28
 * @LastEditors: 李小晴 2689279066@qq.com
 * @LastEditTime: 2024-01-02 15:21:29
 * @FilePath: \grazlink20\uc_sys\src\views\Asset\Pasture\components\Edit.vue
 * Copyright (c) 2023 by 李天惊 uf_lee@163.com, All Rights Reserved. 
-->
<script setup lang="ts">
import { PropType, ref, reactive } from 'vue'
import { ElTag } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()
import { Descriptions } from '@/components/Descriptions'
import { spForageFormulaSeeExcelApi } from '@/api/forms'

import { spForageFormulaSeeApi } from '@/api/sp/food'
import { ContentWrap } from '@/components/ContentWrap'
import { Table } from '@/components/Table'
import { useCache } from '@/hooks/web/useCache'
const { wsCache } = useCache()
const data = ref<any>({})

const props = defineProps({
  detailSchema: {
    type: Array as PropType<DescriptionsSchema[]>,
    default: () => []
  },
  id: {
    type: String,
    default: null
  }
})
// 调用查看接口获取信息
const getForageFormulaSee = async () => {
  const res = await spForageFormulaSeeApi({ id: props.id })
    .catch(() => {})
    .finally(() => {})
  if (res) {
    data.value = res.data
  }
}

const d_columns = reactive<TableColumn[]>([
  {
    field: 'index',
    label: '序号',
    type: 'index',
    width: 30
  },
  {
    field: 'forage_name',
    label: '饲料名称',
    width: 150
  },
  {
    field: 'ratio',
    label: '比例%'
  },
  {
    field: 'weight',
    label: '重量（公斤）'
  }
])

const init = async () => {
  // 调用查看接口查询数据
  await getForageFormulaSee()
}
init()
const exportClick = async () => {
  let { data }: any = await spForageFormulaSeeExcelApi({
    request: {
      id: props.id,
      // my_org_id: ''
      my_org_id: wsCache.get('userInfo').default_org_id
    },
    layout_data: {
      file_name: '饲料配方详情',
      column_cell_start: 'A2',
      column_value: 'detailed',
      column_data: [
        {
          title: '饲料名称',
          width: 20,
          cell_type: 'string',
          give_type: 'variable',
          give_value: 'forage_name'
        },
        {
          title: '比例',
          width: 20,
          cell_type: 'string',
          give_type: 'variable',
          give_value: 'ratio'
        },
        {
          title: '重量',
          width: 20,
          cell_type: 'string',
          give_type: 'variable',
          give_value: 'weight'
        }
      ],
      custom: [
        {
          cell_type: 'string',
          cell: 'A1:C1',
          give_type: 'format',
          give_value: '"${name}"饲料配方详情',
          horizontal: 'center',
          border: true,
          size: '16'
        }
      ],
      dict: ['breed']
    }
  })
    .catch(() => {})
    .finally(() => {
      // saveLoading.value = false
    })
  if (data) {
    window.open(data.url)
  }
}
</script>

<template>
  <div class="mb-10px w-[100%] flex justify-end">
    <ElButton type="primary" @click="exportClick()"> 导出EXCEL </ElButton>
  </div>
  <ContentWrap title="主数据">
    <Descriptions :schema="props.detailSchema" :data="data || {}">
      <template #is_stop="{ row }">
        <ElTag :type="row.is_stop === '0' ? 'success' : row.is_stop === '1' ? 'warning' : 'danger'">
          {{
            row.is_stop === '0' ? '启用' : row.is_stop === '1' ? '停用' : t('tableDemo.commonly')
          }}
        </ElTag>
      </template>
    </Descriptions>
  </ContentWrap>
  <ContentWrap title="明细数据">
    <Table :columns="d_columns" :data="data.detailed" :selection="false" :border="true" />
  </ContentWrap>
</template>
